<script setup>
import { reactive, ref } from 'vue'
import { ArrowDown, Avatar } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import ChooseDialogue from '@/components/app/chooseDialogue.vue'
import editsop from '@/components/app/groupchat.vue'
import { toRaw } from '@vue/reactivity'
import labels from '@/components/app/label.vue'
import { postCustomerGroupSend, postCustomerSize } from '@/api'
import EditLink from '@/components/app/chooseAdjunct.vue'
import EditMiniprogram from '@/components/app/editMiniprogram.vue'
const editMiniprogram = ref()
const showMinip = () => {
	editMiniprogram.value.show()
}
const getDialogueData1 = (val) => {
	console.log(val)
	var arr = adjunctData.value
	val.type = 3
	arr.push(val)
	adjunctData._value = arr
	handleRefresh()
}
const cancel = () => {
	emits('goBack')
}
const emits = defineEmits(['goBack'])
const editLink = ref(null)
const adjunctData = ref([])
const getDialogueData = (val) => {
	var arr = adjunctData.value
	val.type = 2
	arr.push(val)
	adjunctData._value = arr
	handleRefresh()
}

const clickLink = () => {
	editLink.value.show()
}

const tempPic = ref({
	title: '',
	url: ''
})
const selfTime = ref([])
const selData = ref('')
const getSize1 = async (val) => {
	var staffer = []
	staffData.value.forEach((item) => {
		staffer.push(item.id)
	})
	var groups = []
	groupData.value.forEach((item) => {
		groups.push(item.chat_id)
	})
	var tags = []
	tagData.value.forEach((item) => {
		tags.push(item.tag_id)
	})
	var exclude_tags = []
	tagData1.value.forEach((item) => {
		exclude_tags.push(item.tag_id)
	})

	const r = await postCustomerSize({
		staffer: staffer,
		customer_status: 2,
		customer_gender: ruleForm.customer_gender,
		groups: groups,
		times: selfTime.value || [],
		exclude_tags: exclude_tags,
		tags: tags
	})
	selData.value = r.data
}
const totalData = ref('')
const getSize = async (val) => {
	var staffer = []
	staffData.value.forEach((item) => {
		staffer.push(item.id)
	})
	const r = await postCustomerSize({
		staffer: staffer,
		customer_status: 1
	})
	totalData.value = r.data
}
const handleDele = (val) => {
	var arr = adjunctData.value
	arr.splice(val, 1)
	adjunctData._value = arr
	handleRefresh()
}
const cancelAdjunct = (type) => {
	switch (type) {
		case 'img':
			tempPic.value = {
				title: '',
				url: ''
			}
			dialogFormVisible.value = false
			break
	}
}
const saveAdjunct = (type) => {
	switch (type) {
		case 'img':
			var obj = toRaw(tempPic.value)
			obj.type = 1
			var arr = toRaw(adjunctData.value)
			arr.push(obj)
			tempPic.value = {
				title: '',
				url: ''
			}
			adjunctData._value = arr
			dialogFormVisible.value = false
			console.log(adjunctData.value)

			break
	}
	handleRefresh()
}
const TestRef = ref(null)
const TestRef1 = ref(null)
const changeRadio = () => {
	console.log(ruleForm.send_status, 'tuiououio')
}

const getUploadImg = (val) => {
	tempPic.value.url = val.url
}
const showLabels = () => {
	// console.log('111')
	// tableselect.value=true
	var data = {
		show: true,
		type: 2
	}
	TestRef.value.tableshow(data)
}
const showLabels1 = () => {
	// console.log('111')
	// tableselect.value=true
	var data = {
		show: true,
		type: 2
	}
	TestRef1.value.tableshow(data)
}
const tagData = ref([])
const tagData1 = ref([])
const labeldataapi = (val) => {
	console.log(val)
	var arr = []
	val.list.forEach((item) => {
		arr.push(toRaw(item))
	})
	tagData._value = arr
	handleRefresh()
}
const labeldataapi1 = (val) => {
	console.log(val)
	var arr = []
	val.list.forEach((item) => {
		arr.push(toRaw(item))
	})
	tagData1._value = arr
	handleRefresh()
}
const handleDeleTag = (val) => {
	var arr = tagData.value
	arr.splice(val, 1)
	tagData._value = arr
	handleRefresh()
}
const handleDeleTag1 = (val) => {
	var arr = tagData1.value
	arr.splice(val, 1)
	tagData1._value = arr
	handleRefresh()
}

const groupData = ref([])
const editData = ref(null)
const handleDeleGroup = (val) => {
	var arr = groupData.value
	arr.splice(val, 1)
	groupData._value = arr
	handleRefresh()
}
const groupchatapi = (val) => {
	var arr = []
	toRaw(val._value).forEach((item) => {
		arr.push(toRaw(item))
	})
	groupData._value = arr
	handleRefresh()
	console.log(groupData.value)
}
const editsopapi = (val) => {
	var data = {
		show: true,
		id: val,
		name: val.name
	}
	editData.value.addapi(data)
}

const isRefresh = ref(true)
const handleRefresh = () => {
	isRefresh.value = false
	isRefresh.value = true
}
const staffData = ref([])
const chooseStaff = () => {
	dialogVisible.value = true
	chooseDialogue.value.show('staff', staffData.value)
}
const getChooseData = (val) => {
	console.log(val, '数据回显')
	staffData.value = val
	handleRefresh()
}
const chooseDialogue = ref(null)

const Route = useRoute()
const router = useRouter()
const dialogVisible = ref(false)
const ruleFormRef = ref()
const dialogFormVisible = ref()
const dialogFormVisibleLink = ref()
const fileList = ref()
const Linkinput = ref()
const Linkvalue = ref()
const Linkvalue2 = ref()
const Linkvalue3 = ref()
const Linkchecked1 = ref()
const Linkchecked2 = ref()
const Linkchecked3 = ref()
const Linkchecked4 = ref()
const selectValue = ref()
const labelValue = ref()
const linkInput = ref()
const submit = async () => {
	var staffer = []
	staffData.value.forEach((item) => {
		staffer.push(item.id)
	})
	var groups = []
	groupData.value.forEach((item) => {
		groups.push(item.chat_id)
	})
	var tags = []
	tagData.value.forEach((item) => {
		tags.push(item.tag_id)
	})
	var exclude_tags = []
	tagData1.value.forEach((item) => {
		exclude_tags.push(item.tag_id)
	})
	var adjunct_data = []
	console.log(adjunctData.value, 'sdfsdf')
	adjunctData.value.forEach((item) => {
		if (item.type == 1) {
			adjunct_data.push(item)
		} else if (item.type == 2) {
			adjunct_data.push(item)
		} else {
			adjunct_data.push({
				type: 3,
				miniprogram_appid: item.appId,
				miniprogram_imgurl: item.img,
				miniprogram_title: item.title,
				miniprogram_page: item.appUrl
			})
		}
	})

	var json = {
		name: ruleForm.name,
		staffer: staffer,
		customer_status: ruleForm.customer_status,
		customer_gender: ruleForm.customer_gender,
		groups: groups,
		tags: tags,
		exclude_tags: exclude_tags,
		times: selfTime.value || [],
		repetition_status: ruleForm.repetition_status,
		content: ruleForm.content,
		adjunct_data: adjunct_data,
		send_status: ruleForm.send_status,
		send_time: ruleForm.send_statustime + ' ' + ruleForm.selectTime
	}
	console.log(json, 'tououiouio')

	const r = await postCustomerGroupSend(json)

	if (r) {
		cancel()
	}
}

const ruleForm = reactive({
	name: '',
	imgName: '',
	customer_status: 1,
	repetition_status: '1',
	content: '',
	send_status: 1,
	customer_gender: '',
	timeValue: '',
	send_statustime: '',
	selectTime: '',
	img: ''
})

const rules = reactive({
	// name: [
	//     { required: true, message: "Please input Activity name", trigger: "blur" },
	//     { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
	// ],
	customer_status: [
		{
			required: true,
			message: 'Please select activity customer_status',
			trigger: 'change'
		}
	],
	img: [
		{
			required: true,
			message: 'Please select activity customer_status',
			trigger: 'change'
		}
	]
})

const openDialog = () => {}
const radioChange1 = (label) => {
	console.log(label)
}
const radioChangeChild = (label) => {
	console.log(label)
}
const timeclick = (time) => {
	console.log(time)
}
const clickImg = (item) => {
	console.log(item)
	dialogFormVisible.value = true
}

const addrating = () => {
	//     obj.id=Linklist.length
	//   console.log(obj.id)
	//    Linklist.push(obj)
	// console.log(Linklist)
}
</script>
<template>
	<div class="app-back-tab" style="margin: 0 20px">
		<div class="app-flex-left">
			<span class="back-box app-pointer" @click="cancel">
				<MyIcon class="app-icon" name="Back" />
				<span class="back-box-mr">返回</span>
			</span>
		</div>
	</div>
	<div class="allStyle">
		<div class="formStyle">
			<div class="formStyleChild">
				<div class="formTopStyle">基础信息</div>
				<div style="margin-top: 20px">
					<el-form
						ref="ruleFormRef"
						:model="ruleForm"
						:rules="rules"
						label-width="120px"
						class="demo-ruleForm"
						status-icon
					>
						<el-form-item label="群发名称:" prop="name" style="width: 300px">
							<el-input
								v-model="ruleForm.name"
								maxlength="15"
								show-word-limit
								placeholder="群发名称仅内部可见"
								color="#1890ff"
							/>
						</el-form-item>
						<el-form-item label="选择群发账号:" prop="name" style="width: 400px">
							<!-- <el-input v-model="ruleForm.name" :suffix-icon="ArrowDown" placeholder="全部群发账号"
                                color="#1890ff" :prefix-icon="Avatar" /> -->
							<span v-if="isRefresh">
								<span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-if="staffData.length > 2">
									<span class="app-flex-left">
										<el-avatar
											v-if="staffData[0].avatar"
											class="cho-margin"
											shape="square"
											:size="30"
											:src="staffData[0].avatar"
										/>
										<span>{{ staffData[0].name }}等{{ staffData.length }}个账号</span>
									</span>
									<el-icon>
										<ArrowDown />
									</el-icon>
								</span>
								<span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-else>
									<span class="app-flex-left" v-for="(item, index) in staffData" :key="index">
										<el-avatar v-if="item.avatar" class="cho-margin" shape="square" :size="30" :src="item.avatar" />
										<span>{{ item.name }}</span>
									</span>
									<span v-if="staffData.length == 0">默认全部</span>
									<el-icon>
										<ArrowDown />
									</el-icon>
								</span>
							</span>
						</el-form-item>

						<el-form-item>
							<div style="background-color: #ecf8fe; padding: 5px">
								提示:群主收到群发任务后，可在企业微信上选择群聊发送群发消息
								<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="left" trigger="hover">
									<div class="a-send-img"></div>
									<template #reference>
										<span style="color: #1890ff"> 查看详情 </span>
									</template>
								</el-popover>
							</div>
						</el-form-item>
						<div class="formTopStyle">编辑群发消息</div>
						<el-form-item label="群发内容:" style="width: 770px; margin-top: 20px">
							<el-input
								v-model="ruleForm.content"
								:rows="15"
								type="textarea"
								placeholder="请输入群发内容"
								show-word-limit
								maxlength="600"
							/>
							<!-- <div style="width: 700px; border: 1px solid #eeeeee">
                                <div style="
                    display: flex;
                    justify-content: space-between;
                    margin: 15px 15px;
                  ">
                                    <div style="display: flex; justify-content: space-between">
                                        <el-icon :size="18" style="margin-top: 3px">
                                            <Remove />
                                        </el-icon>
                                        <div style="margin-top: -4px">【图片】: 2</div>
                                    </div>
                                    <div>
                                        <el-icon :size="20">
                                            <Edit />
                                        </el-icon>
                                    </div>
                                </div>
                            </div> -->
							<el-popover ref="popover" placement="top" trigger="click" popper-class="my-el-popover">
								<template #reference>
									<div @click="openDialog" style="display: flex; color: #1890ff; padding-left: 10px">
										<el-icon style="margin-top: 9px; margin-right: 4px">
											<CirclePlus />
										</el-icon>
										<div>添加附件</div>
									</div>
								</template>
								<div class="dialogContent" label="图片" @click="clickImg">
									<el-icon :size="18">
										<PictureFilled />
									</el-icon>
									<div style="margin-left: 5px">图片</div>
								</div>
								<div class="dialogContent" @click="clickLink">
									<el-icon :size="18">
										<Link />
									</el-icon>
									<div style="margin-left: 5px">链接</div>
								</div>
								<div class="dialogContent" @click="showMinip">
									<i class="iconfont">&#xe63a;</i>
									<div style="margin-left: 5px">小程序</div>
								</div>
								<!-- 

    
 -->
							</el-popover>
						</el-form-item>

						<!-- 点击图片弹窗 -->
						<el-dialog v-model="dialogFormVisible" center title="添加图片" width="30%">
							<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px">
								<el-form-item label="图片标题:">
									<el-input v-model="tempPic.title" />
								</el-form-item>
								<el-form-item label="图片:" prop="img">
									<Upload v-if="dialogFormVisible" :imgurl="tempPic.url" @getImg="getUploadImg($event, val)" />
								</el-form-item>
								<el-form-item style="position: relative">
									<div style="right: 10px; position: absolute">
										<el-button @click="cancelAdjunct('img')">取消</el-button>
										<el-button type="primary" @click="saveAdjunct('img')">确定</el-button>
									</div>
								</el-form-item>
							</el-form>
						</el-dialog>
						<!-- 点击链接弹窗 -->
						<!-- <el-dialog v-model="dialogFormVisibleLink" center title="添加链接附件" width="40%">
                            <div>
                                <div style="display: flex; justify-content: flex-start">
                                    <div style="
                      width: 3px;
                      height: 15px;
                      background-color: #1890ff;
                      margin-right: 3px;
                      margin-top: 4px;
                    "></div>
                                    <div>链接地址:</div>
                                </div>
                                
                                <el-input v-model="Linkinput" placeholder="Please input" style="margin: 10px 0" />
                                <el-button type="primary">选择互动雷达</el-button>
                                <div style="
                    display: flex;
                    justify-content: flex-start;
                    margin: 10px 0;
                  ">
                                    <div style="
                      width: 3px;
                      height: 15px;
                      background-color: #1890ff;
                      margin-right: 3px;
                      margin-top: 7px;
                    "></div>
                                    <div>
                                        高级地址:
                                        <el-switch v-model="Linkvalue" />
                                    </div>
                                </div>
                                <div style="display: flex; justify-content: flex-start">
                                    <div style="
                      width: 3px;
                      height: 15px;
                      background-color: #1890ff;
                      margin-right: 3px;
                      margin-top: 7px;
                    "></div>
                                    <div>
                                        链接追踪设置:
                                        <el-switch v-model="Linkvalue2" />
                                    </div>
                                </div>

                                <div class="linkTableStyle">
                                    <el-checkbox v-model="Linkchecked1" label="行为通知" size="large" />
                                    <div>
                                        当用户点击雷达链接时，发送雷达链接的员工将会收到消息提醒
                                    </div>
                                    <el-checkbox v-model="Linkchecked2" label="动态通知" size="large" />
                                    <div>
                                        当用户点击雷达链接时，发送雷达链接的员工将会收到消息提醒，阅读时长和阅读完成率在客户动态里
                                    </div>
                                    <el-checkbox v-model="Linkchecked3" label="客户标签" size="large"
                                        @change="link3(Linkchecked3)" />
                                    <div>
                                        当用户点击雷达链接时，发送雷达链接的员工将会收到消息提醒
                                    </div>
                                    <div>
                                        <el-button v-if="Linkchecked3 === true">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>添加标签
                                        </el-button>
                                    </div>
                                    <el-checkbox v-model="Linkchecked4" label="设置客户评分" size="large" />
                                    <span style="color: #1890ff;">什么是客户评分？</span>
                                    <div class="linkStyleChild">
                                        <div class="linkStyleChild2">
                                            <div v-for=" item in Linklist" :key="item.id">
                                                <div style="
                        display: flex;
                        justify-content: flex-start;
                        margin: 15px 15px;
                      ">
                                                    <div style="
                          display: flex;
                          justify-content: space-between;
                          margin-top: 10px;
                        ">
                                                        <el-icon :size="18">
                                                            <Remove />
                                                        </el-icon>
                                                        <div>规则1:</div>
                                                    </div>
                                                    <div style="display: flex">
                                                        <div>
                                                            用户
                                                            <el-select v-model="item.selectValue" clearable class="m-2"
                                                                size="large" placeholder="Select">
                                                                <el-option v-for="opt in item.options" :key="opt.value"
                                                                    :label="opt.label" :value="opt.value" />
                                                            </el-select>
                                                        </div>
                                                        <div>
                                                            增加
                                                            <el-input-number v-model="item.num" :min="1" :max="10"
                                                                :controls="false" size="large" />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div style="margin-left:50px ;">
                                                    并打开上个标签:
                                                    <el-switch v-model="labelValue" />
                                                    <el-select v-model="selectValue" clearable class="m-2" size="large"
                                                        placeholder="Select" v-if="labelValue === true">
                                                        <el-option v-for="item in options" :key="item.value"
                                                            :label="item.label" :value="item.value" />
                                                    </el-select>
                                                </div>
                                            </div>
                                        </div>


                                        <el-divider border-style="dashed" />

                                        <div style="margin-bottom: 5px;" @click="addrating">
                                            <p style="display: flex;margin-top: -10px; margin-left: 20px;">
                                                <el-icon color="#1890ff">
                                                    <CirclePlus />
                                                </el-icon>
                                            <p style="color: #1890ff;margin-top: -5px; margin-left: 5px;">添加规则<span
                                                    style="color: #8c8c8c;">(添加得多条规则可同时生效)</span></p>
                                            </p>
                                        </div>
                                    </div>
    

                                    <el-checkbox v-model="Linkchecked4" label="客户积分" size="large" />

                                    <div class="linkStyleChild">
                                        <div class="linkStyleChild2">
                                            <div v-for=" item in Linklist" :key="item.id">
                                                <div style="
                        display: flex;
                        justify-content: flex-start;
                        margin: 15px 15px;
                      ">
                                                    <div style="
                          display: flex;
                          justify-content: space-between;
                          margin-top: 10px;
                        ">
                                                        <el-icon :size="18">
                                                            <Remove />
                                                        </el-icon>
                                                        <div>规则1:</div>
                                                    </div>
                                                    <div style="display: flex">
                                                        <div>
                                                            用户
                                                            <el-select v-model="item.selectValue" clearable class="m-2"
                                                                size="large" placeholder="Select">
                                                                <el-option v-for="opt in item.options" :key="opt.value"
                                                                    :label="opt.label" :value="opt.value" />
                                                            </el-select>
                                                        </div>
                                                        <div>
                                                            增加
                                                            <el-input-number v-model="item.num" :min="1" :max="10"
                                                                :controls="false" size="large" />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div style="margin-left:50px ;">
                                                    并打开上个标签:
                                                    <el-switch v-model="labelValue" />
                                                    <el-select v-model="selectValue" clearable class="m-2" size="large"
                                                        placeholder="Select" v-if="labelValue === true">
                                                        <el-option v-for="item in options" :key="item.value"
                                                            :label="item.label" :value="item.value" />
                                                    </el-select>
                                                </div>
                                            </div>
                                        </div>


                                        <el-divider border-style="dashed" />

                                        <div style="margin-bottom: 5px;" @click="addrating">
                                            <p style="display: flex;margin-top: -10px; margin-left: 20px;">
                                                <el-icon color="#1890ff">
                                                    <CirclePlus />
                                                </el-icon>
                                            <p style="color: #1890ff;margin-top: -5px; margin-left: 5px;">添加规则<span
                                                    style="color: #8c8c8c;">(添加得多条规则可同时生效)</span></p>
                                            </p>
                                        </div>
                                    </div>

                                    <el-checkbox v-model="Linkchecked4" label="保存为企业雷达" size="large" />
                                    <div class="linkStyleChild2">
                                        <div style="display: flex; ">
                                            <div style="width: 80px;margin-top: 5px;"> 链接标题: </div>
                                            <el-input v-model="linkInput" maxlength="15" :show-word-limit="true"
                                                placeholder="Please input" />
                                        </div>
                                    </div>



                                </div>
                                <div style="float: right; margin-top: 30px;padding-bottom: 20px;">
                                    <el-button>取消</el-button>
                                    <el-button type="primary">确定</el-button>
                                </div>

                            </div>
                        </el-dialog> -->

						<div style="margin-top: -16px; margin-left: 130px; width: 640px; margin-bottom: 30px">
							<div v-if="isRefresh" v-for="(item, index) in adjunctData" :key="index">
								<div class="app-flex-2">
									<span class="app-gap-words-left"
										>【{{ item.type == 1 ? '图片' : item.type == 2 ? '链接' : '小程序' }}】{{
											item.title || item.link_title
										}}</span
									>

									<el-icon @click="handleDele(index)" :size="20" color="#999">
										<CircleClose />
									</el-icon>
								</div>
							</div>
						</div>
						<el-form-item>
							<div class="beCareful">注意: 每位客户每天可以接收1条群发消息，不限企业发布的群发还是个人发布的群发。</div>
						</el-form-item>
						<el-form-item label="群发时间:">
							<el-radio-group @change="changeRadio" v-model="ruleForm.send_status">
								<el-radio :label="1">立即发送</el-radio>
								<el-radio :label="2">定时发送</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item v-if="ruleForm.send_status == 2">
							<el-date-picker
								v-model="ruleForm.send_statustime"
								value-format="YYYY-MM-DD"
								format="YYYY-MM-DD"
								type="date"
								placeholder="选择日期"
							/>
							<el-time-picker
								value-format="HH:mm:ss"
								format="HH:mm:ss"
								v-model="ruleForm.selectTime"
								placeholder="请输入时间"
								@change="timeclick(ruleForm.selectTime)"
							/>
						</el-form-item>
					</el-form>
				</div>
				<div class="liucheng">
					<div>企业群发的操作流程</div>
					<p class="pStyle">1.创建完群发任务后，员工将在企业微信上收到【客户联系】新消息通知</p>
					<p class="pStyle">2.员工点击【客户联系】，打开待发送的企业信息，可一键将消息发送给客户</p>
				</div>
				<div style="margin: 50px 0 50px 100px">
					<el-button type="primary" @click="submit">通知成员发送</el-button>
				</div>
			</div>
			<!-- 右边 -->
			<div class="formStyleRight">
				<img style="margin-left: 50px" src="../../../../assets/phone.png" />
			</div>
		</div>
		<ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
		<EditLink @getDialogueData="getDialogueData($event, val)" ref="editLink" />
		<EditMiniprogram @getDialogueData="getDialogueData1($event, val)" ref="editMiniprogram" />
	</div>
</template>
<style>
@import url('../../../../style/app-component.scss');
.el-page-header {
	display: none;
}
.iconfont {
	font-family: 'iconfont' !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.el-popover.my-el-popover {
	height: 200px;
}
img,
picture {
	max-width: 500px !important;
	display: block;
}
</style>
<style scoped>
* {
	font-size: 14px;
}
.pStyle {
	color: #8a8a8a;
}

.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.allStyle {
	margin: 20px;
}

.formStyle {
	display: flex;
	justify-content: space-between;
	background-color: #ffffff;
}

.formTopStyle {
	height: 53px;
	line-height: 52px;
	border-bottom: 1px solid #ededed;
	font-size: 15px;
}

.formStyleChild {
	margin-left: 20px;
	width: 100%;
	flex: 1;
}

.formStyleRight {
	flex: 1;
	padding-left: 30px;
	margin-top: 100px;
}

.buttonStyle {
	color: #8c8c8c;
	margin-left: 120px;
	font-size: 14px;
	margin-top: -15px;
}

.dialogContent {
	display: flex;
	margin: 10px 0;
	padding: 10px;
}

.dialogContent:hover {
	width: 150px;
	background-color: #ecf8fe;
	padding-left: 23px;
	margin-left: -13px;
}

.beCareful {
	width: 650px;
	height: 54px;
	border: 1px solid #1890ff;
	padding: 10px;
	background-color: #f7fcff;
}

.liucheng {
	width: 650px;
	height: 80px;
	background-color: #fbfbfb;
	margin-left: 120px;
}

.filterStyles {
	background-color: #fbfbfb;
	margin-left: 110px;
	border: 1px solid #ebebeb;
}

.topStyleChild1 {
	margin-left: -5px;
	display: flex;
	width: 500px;
	justify-content: flex-start;
	align-items: center;
}

.searchStyle {
	display: flex;
	margin-left: 50px;
}

.searchStyleChild {
	margin-left: 5px;
}

.Child2Style {
	position: relative;
	margin-left: 5px;
	width: 400px;
	height: 32px;
	margin-top: 2px;
	border-radius: 5px;
	border: 1px solid #d9d9d9;
}

.Child2Content {
	position: absolute;

	padding-left: 5px;
	font-size: 14px;
	color: #999999;
}

.child2StyleIcon {
	position: absolute;
	right: 8px;
}

.linkTableStyle {
	background-color: #fafafa;
	padding: 20px;
	border: 1px solid #eeeeee;
}

.linkStyleChild {
	background-color: #ffffff;
}

.linkStyleChild2 {
	background-color: #ffffff;

	padding: 10px 0;
}
.el-page-header {
	display: none;
}
</style>
